<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>总结</h1>
        <p> 
            computed和watch之间的区别: <br>
            1.computed能完成的功能，watch都可以完成<br>
            2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。<br>
                两个重要的小原则:<br>
                1.所被Vue管理的函数,在方法中 需要使用 vue中的数据的时候，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。<br>
                2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数， <br>
                这样this的指向才是vm 或 组件实例对象。<br>
        </p>    
        <hr>
        <h1>姓名案例-计算属性实现</h1>
        <p>{{msg}}</p>
        姓：<input type="text" v-model="firstName" > <br>
        名：<input type="text" v-model="lastName" > <br>
        姓名：<span>{{fullName}}</span>


    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            firstName: 'John',
            lastName: 'Doe',
            // fullName:''
            
        },
        computed:{
            //计算属性 一般是 不需要修改  只需要展示 所以一般不需  set
            // 确定只读 不改  就可以简写
            fullName(){
                //setTimeout(() => {
                    return this.firstName + '-' + this.lastName;
                //}, 1000);
                
            }
        },
        watch:{
            firstName(newVal,oldVal){
                this.firstName =newVal;
            },
            lastName(newVal,oldVal){
                this.lastName =newVal;
            }
        }
        
    })
</script>
</html>